<template>
	<view class="container">
		<!-- 内容区域包装器 -->
		<view class="content-wrapper">
			<view class="tip">
				可用积分(支付时系统自动抵扣)<br>
				<text style="font-size:36rpx;font-weight:bold;">{{ userInfo.score }}</text>
			</view>
			<view class="cord">
				<view class="cord-item" :class="index===current?'selectItem':''" v-for="(item,index) in list"
					:key="index" @click="recharge(item,index)">
					<view class="t0">
						{{item.money}}元/{{item.num}}条
					</view>
					<view class="t1">
						最高可用<text class="font-color-red">{{item.score}}</text>积分
					</view>
					<view class="top-mark" v-if="index>0">
						优惠
					</view>
				</view>
			</view>
			<view class="remark">
				<text style="color:#333333;">充值说明：</text><br>
				<text class="txt">1.短信可用于催缴房租、发送入住通知等。</text>
			</view>
			<view style="height: 200rpx;"></view>
			<view class="folebutton" @click="jump('/pages-landlord/house/smsLog')">
				短信记录
			</view>
		</view>
	</view>
</template>

<script>
	import {
		recharge,
		cancelRecharge,
		recharge_config,
	} from '@/api/landlord.js'
	import {
		getUserInfo
	} from '@/api/mine.js'
	export default {
		data() {
			return {
				list: [],
				userInfo: {},
				current: 0,
			};
		},
		onLoad(options) {
			this.getUserInfo()
			this.init()
		},
		methods: {
			getUserInfo() {
				getUserInfo().then(res => {
					this.userInfo = res.data.data.userinfo;
				})
			},
			init() {
				recharge_config().then(res => {
					console.log("8888", res.data);
					this.list = res.data.data
				})
			},
			// 路由跳转
			jump(item) {
				uni.navigateTo({
					url: item
				});
			},
			userCancelRecharge(recharge_id) {
				cancelRecharge({
					recharge_id: recharge_id
				}).then(res => {
					this.$Toast('支付失败')
					this.getUserInfo()
				})
			},
			recharge(item, index) {
				this.current = index
				let that = this
				recharge({
					id: item.id
				}).then(res => {
					uni.requestPayment({
						provider: "wxpay",
						timeStamp: res.data.data.timeStamp,
						nonceStr: res.data.data.nonceStr,
						package: res.data.data.package,
						signType: res.data.data.signType,
						paySign: res.data.data.paySign,
						success: function(res) {
							uni.showToast({
								title: "充值成功！",
								icon: "success",
							});
							this.getUserInfo()
							uni.navigateTo({
								url: '/pages-landlord/house/smsLog'
							});
						},
						fail: function(err) {
							that.userCancelRecharge(res.data.data.recharge_id)
						},
					});
				})
			}
		},
	}
</script>

<style lang="less" scoped>
	.container {

		font-size: 28rpx;
		background: #F5F6FA;
	}

	.content-wrapper {
		background: linear-gradient(90deg, #F5F6FA 0%, #F1E0D8 100%);
		background-size: 100% 45%;
		min-height: 100vh;
		padding: 40rpx;
	}

	.remark {
		color: #999999;
		margin-top: 40rpx;

		.txt {
			font-size: 24rpx;
			color: #9A9A9A;
			margin-top: 40rpx;
		}
	}

	.tip {
		margin: 30rpx 0;
		font-size: 26rpx;
		color: #666666;
	}

	.font-color-red {
		color: #FE4F04;
	}

	.cord {
		background-color: #ffffff;
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		/* 允许换行 */
		gap: 20rpx;
		/* 设置 item 之间的间隔 */
		padding: 32rpx;
		border-radius: 20rpx;

		.cord-item {
			border: 1px solid #999999;
			padding: 32rpx 20rpx;
			border-radius: 32rpx;
			flex: 1 1 calc(50% - 20rpx);
			box-sizing: border-box;
			position: relative;

			.t0 {
				font-size: 30rpx;
				margin-bottom: 30rpx;
			}

			.t1 {
				font-size: 24rpx;
				color: #9A9A9A;
			}

			&.selectItem {
				border: 1px solid #FE4F04;
				background-color: rgba(254, 79, 4, 0.06);

				.t0 {
					color: #FE4F04;
				}
			}

			.top-mark {
				position: absolute;
				left: -2rpx;
				top: -10rpx;
				z-index: 1;
				font-size: 20rpx;
				color: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 0;
				padding: 8rpx 16rpx;
				background: linear-gradient(180deg, #FE4F04 0%, #F6BF88 100%);
			}
		}

	}

	.folebutton {
		text-align: center;
		color: #FE4F04;
		border: 1px solid #FE4F04;
		border-radius: 30rpx;
		position: fixed;
		line-height: 80rpx;
		width: calc(100% - 80rpx);
		bottom: 30rpx;
	}
</style>